<template>
  <div class="home-container">
    <div class="home-left">
      <!--  -->
      <el-carousel trigger="click" class="home-swiper">
        <el-carousel-item v-for="item in 4" :key="item">
          <img
            class="home-img"
            referrerpolicy="no-referrer"
            src="https://img.win3000.com/m00/d6/f0/39de3b0c924e419833db0c8aab402dd6.jpg"
          >
        </el-carousel-item>
      </el-carousel>
      <!--  -->
      <el-card class="panel">
        <div slot="header" class="clearfix panel-title">
          <span>热门功能</span>
        </div>
        <div class="panel-content">
          <div v-for="item in 12" :key="item" class="panel-content-item">
            <div class="panel-content-item-icon" />
            <div class="panel-content-item-text">商品裂变</div>
          </div>
        </div>
      </el-card>
      <!--  -->
      <el-card class="panel">
        <div slot="header" class="clearfix panel-title">
          <span>使用教程</span>
          <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
        </div>
        <div class="panel-content">
          <div v-for="item in 3" :key="item" class="panel-content-hor-item">
            <div class="panel-content-hor-item-img" />
            <div class="panel-content-hor-item-text">
              <p class="hor-item-title">软件使用指南</p>
              <p class="hor-item-desc">三分钟快速了解软件基本功能</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="home-right">
      <div class="shop-group">
        <div class="shop-info">
          <p class="shop-info-title">店铺名称xxxxx</p>
          <div class="shop-info-text flex-between">
            <p>有效期至: 2024-07-30</p>
            <a href="javascript:;">前往续费 ></a>
          </div>
          <div class="shop-info-text flex-between">
            <p>积分余额: 900</p>
            <a href="javascript:;">前往充值 ></a>
          </div>
        </div>
        <div class="shop-info" />
      </div>
      <el-card class="panel panel-kefu">
        <div slot="header" class="clearfix panel-title">
          <span>联系客服</span>
        </div>
        <div class="shop-content">
          <div>
            <div class="shop-qrcode" />
            <p>上班时间: 9:30 - 18:30</p>
            <p>客服电话: 15134353737</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getBanner } from '@/api/home'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      iconList: []
    }
  },
  created() {
    // this.getBannerList();
  },
  methods: {
    getBannerList() {
      getBanner({
        PageIndex: 1,
        PageSize: 20,
        Status: -1
      }).then((res) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.home-left {
  flex: 1;
}

.home-swiper,
.el-carousel__container,
.el-carousel__item {
  width: 100%;
  height: 240px;
}

.home-img {
  width: 100%;
  height: 100%;
}

.panel {
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
  .panel-title {
    font-size: 16px;
    font-weight: 500;
  }
  .panel-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .panel-content-item {
      margin-right: 28px;
      margin-bottom: 20px;
      &-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #eee;
        margin: 0 auto;
      }
      &-text {
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
      }
    }
    .panel-content-hor-item {
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      &-img {
        width: 60px;
        height: 60px;
        background-color: #FF5B5D;
        margin-right: 12px;
      }
      .hor-item-title {
        font-size: 14px;
        font-weight: 500;
      }
      .hor-item-desc {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.home-right {
  margin-left: 20px;
}
.shop-info {
  width: 285px;
  background-color: #fff;
  padding: 16px 20px;
  height: 110px;
  line-height: 0;
  &-title {
    font-weight: bold;
    font-size: 16px;
  }
  &-text {
    font-size: 14px;
    a {
      color: #4E78EF;
    }
  }
  &:nth-child(2) {
    margin-top: 20px;
    background-color: #999;
  }
}
.shop-qrcode {
  width: 180px;
  height: 180px;
  margin-bottom: 32px;
  background-color: #999;
}
.shop-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  p {
    text-align: center;
    font-size: 14px;
    color: #000;
  }
}
</style>
